<template>
	<view>
		<view class="">
			<topbar>
				<view class="ml36 mr40 ms22">
					<view class="flex-align">
						<view class="  contactMen mr30" @click="back">信息</view>
						<view class="   message mr20 " @click="$pub.go('/pages_friend/contactMen/contactMen')">联系人</view>
						<view class="" @click="open"><image src="/static/img/message/145.png" mode="" style="width: 31rpx;height: 31rpx;"></image></view>
					</view>
				</view>
			</topbar>

			<view class="" :style="{ 'padding-top': h + 'px' }"></view>

			<view class="wrap  ml32 mr30">
				<!-- 1 -->
				<view class=" ms30">
					<!-- searchIcon="mic" -->
					<u-search placeholder="搜索" v-model="keyword" :showAction="false"></u-search>
				</view>
				<!-- 2 -->
				<view class="">
					<view class="btn1" @click="$pub.go('/pages_contact/newFriend/newFriend')">
						<image class="ml28 mr34" src="/static/img/message/55003.svg" mode="" style="width:36rpx;height: 36rpx;"></image>

						<view class="word1 mr54">新的好友</view>
					</view>
				</view>
				<!-- 3 -->
				<view class="">
					<view class="h54 flex-align" @click="$pub.go('/pages_contact/circleFriend/circleFriend')">圈友（已互关或者已添加好友的）</view>
					<u-gap height="0.5" bgColor="#FAFAFA"></u-gap>
					<view class="h54 flex-align" @click="$pub.go('/pages_contact/circleGroup/circleGroup')">圈组</view>
					<u-gap height="0.5" bgColor="#FAFAFA"></u-gap>
					<view class="h54 flex-align" @click="$pub.go('/pages_contact/followMe/followMe')">关注我的</view>
				</view>
			</view>
			<!-- 4 -->
			<u-gap height="8" bgColor="#FAFAFA"></u-gap>
			<view class="wrap  ml32 mr30">
				<!-- 1 -->
				<view class="app1 flex flex-between">
					<view class="left">我的关注（0）</view>
					<!-- <view class="right"><u-switch v-model="value" @change="change"></u-switch></view> -->
					<view class="right">
						<view
							class=""
							style="width: 200rpx;
							height: 60rpx;
							background: #F7F7F7;
							border-radius: 30rpx 30rpx 30rpx 30rpx;
							opacity: 1;
							display: flex;
							align-items: center;
							"
						>
							<view
								class=""
								style="width: 100rpx;
										height: 52rpx;
										background: #FFFFFF;
										border-radius: 30rpx 30rpx 30rpx 30rpx;
										opacity: 1;
										font-size: 24rpx;
										font-weight: 400;
										text-align: center;
										line-height: 52rpx;
										"
							>
								全部
							</view>
							<view
								class=""
								style="width: 100rpx;
										height: 52rpx;
											background: #F7F7F7;
										border-radius: 30rpx 30rpx 30rpx 30rpx;
										opacity: 1;
										font-size: 24rpx;
										font-weight: 400;
										text-align: center;
										line-height: 52rpx;
										"
							>
								圈友
							</view>
						</view>
					</view>
				</view>
				<!-- 2 -->
				<view class="">
					<view class="mt32" v-for="item in 0" :key="item">
						<view class="wrap flex flex-align">
							<view class="left mr20"><u-avatar :src="src"></u-avatar></view>
							<view class="right">安安</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 弹框 -->
			<u-popup mode="bottom" :show="show" @close="close" @open="open" :closeable="true">
				<view class="slot  ml32 mr32 mt70">
					<!--  -->
					<view class="ms20"><u-search placeholder="搜索用户" v-model="keyword"></u-search></view>
					<!--  -->
					<!--  -->
					<u-cell-group>
						<u-cell size="large" title="已加入的圈聊" value="" isLink url="/pages_contact/circleGroup/circleGroup">
							<image style="width: 48rpx;height: 38rpx;" src="/static/img/pages_friend/54906.svg" slot="icon" mode=""></image>
						</u-cell>
						<u-cell size="large" title="面对面建圈" value="" isLink>
							<image style="width: 48rpx;height: 38rpx;" src="/static/img/pages_friend/54624.svg" slot="icon" mode=""></image>
						</u-cell>
						<u-cell size="large" title="单元格" value="" v-for="(item, index) in friendList" :key="item">
							<view slot="title" class="u-slot-title flex-align">
								<view class="mr26"><u-avatar :src="item.uavatar"></u-avatar></view>
								<text>{{ item.uremark }}</text>
								<!-- {{ item.ufriendId }} -->
							</view>
							<view class="" slot="value">
								<image
									v-if="!item.status"
									@click="addFriendIds(item.ufriendId, item.status, index)"
									src="/static/img/message/msgnb.svg"
									mode=""
									style="width: 48rpx;height: 48rpx;"
								></image>
								<image
									v-else
									@click="addFriendIds(item.ufriendId, item.status, index)"
									src="/static/img/message/54908.svg"
									mode=""
									style="width: 48rpx;height: 48rpx;"
								></image>
							</view>
						</u-cell>
						<u-cell size="large" title="单元格" value="">
							<view slot="title" class="u-slot-title flex-align">
								<view class="mr26"><u-avatar :src="src"></u-avatar></view>
								<text>机器人1</text>
							</view>
							<view class="" slot="value"><image src="/static/img/message/msgnb.svg" mode="" style="width: 48rpx;height: 48rpx;"></image></view>
						</u-cell>
					</u-cell-group>
					<!--  -->
					<view class="ms50 mt40">
						<button @click="bulidCircle" v-if="!friendIds.length" class="laBtn1 "><view class="word99">发起圈聊</view></button>
						<button @click="bulidCircle" v-else class="laBtn2 "><view class="word88">发起圈聊</view></button>
					</view>
					<!--  -->
					<!--  -->
				</view>
			</u-popup>

			<tabbar></tabbar>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value6: 0,
			h: 0,
			keyword: '',
			show: false,
			keyword: '',
			src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
			/* 好友id */
			friendIds: [],
			type: 'primary',
			btn: true,
			/*选择  */
			value: '',
			src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
			/* 我的关注列表 */
			myPayList: [],
			/* 好友列表 */
			friendList: []
		};
	},
	onHide() {
		this.friendList = this.friendList.map(i => {
			i.status = true;
			return i;
		});
	},
	mounted() {
		this.reSetfriendIds();
		this.getmyPayList();
		this.getfindFriendList();
	},
	onShow() {
		this.h = getApp().globalData.systemHeight;
		console.log(getApp().globalData.navHeight, 'globalData.navHeight');
		console.log(this.$navHeight, '$navHeight');
	},
	watch: {
		friendList: {
			handler(newName, oldName) {
				console.log(newName);
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		/*  */
		scoketClose() {
			this.$socketIo.connectNum = 1;
			let userInfo = uni.getStorageSync('userInfo');
			const data = {
				cmd: 14,
				userId: userInfo.userId
			};
			this.$socketIo.send(data); // 这是给后端发送特定数据 关闭推送
			this.$socketIo.Close(); // 主动 关闭连接 ， 不会重连
		},
		getWebsocketData(id, name, ids) {
			console.log(id, name, ids);
			// 打开连接
			let userInfo = uni.getStorageSync('userInfo');
			// 要发送的数据包
			const data = {
				cmd: 25,
				type: 2,
				createTime: 1679452257475,
				latitude: '10',
				longitude: '10',
				userId: id,
				nick: name,
				users: ids,
				userName: userInfo.uaccount
			};
			this.$socketIo.connectSocketInit(data);
			console.log(data, 'datadatadatadatadata');

			/* 还原 */
			uni.showToast({
				title: '创建成功'
			});
			this.close();

			// 接收数据
			uni.$on('getPositonsOrder', res => {
				this.connect = true;
				console.log(res, 'resresres');
				const { code, data } = res;
				// console.log(res, 're');
				// console.log(code);
				// console.log(data);

				if (code == 10018) {
					let name = this.from;
					// console.log(name, 'name');
					this.talkList = data.friends[name];
					// 根据后端传过来的数据进行 业务编写。。。
				} else {
				}
			});
			// 错误时做些什么
			uni.$on('connectError', () => {
				this.connect = false;
				this.scoketError = true;
			});
		},

		pu() {
			this.friendList.push(1);
		},

		/* 获取我的关注列表 */
		async getmyPayList() {
			let re = await this.$API.friendApi.myPayList();
			this.myPayList = re;
		},
		/* 获取好友列表 */
		async getfindFriendList() {
			let re = await this.$API.friendApi.findFriendList();
			this.friendList = re;
			this.friendList = this.friendList.map(i => {
				i.status = false;
				return i;
			});
		},
		/* 选择 */
		change(e) {
			console.log('change', e);
		},
		reSetfriendIds() {
			this.friendIds = [];
		},
		addFriendIds(id, status, index) {
			console.log(111);
			console.log(index, 'index');
			this.friendList = this.friendList.map(i => {
				if (i.ufriendId === id) {
					i.status = !i.status;
					// var sid = Number(id);
					// BigInt.prototype.toJSON = function() {
					// 	return this.toString();
					// };
					// let sid = BigInt(id);

					if (i.status === true) {
						console.log('改添加了');
						this.friendIds.push(id);
					} else {
						console.log('改删除了');
						this.friendIds.splice(index, 1);
					}
				}
				return i;
			});
			// console.log('添加了', id);
			console.log('ids', this.friendIds);
			//去除重复
			this.friendIds = [...new Set(this.friendIds)];

			console.log('ids', this.friendIds);
		},
		async bulidCircle() {
			let aa = uni.getStorageSync('token');
			if (!this.friendIds.length) {
				uni.showToast({
					title: '请选择要拉的人'
				});
				return;
			}
			var userId = uni.getStorageSync('userInfo').userId;
			var userName = uni.getStorageSync('userInfo').unickName;
			console.log(userName, 'userName');
			var list = this.friendIds;
			/* webSocket 创建群 */
			this.getWebsocketData(userId, userName, list);
			return;
			console.log(list, 'list');
			// let re = await this.$API.groupApi.pullPeopleGroup(userId, userName, list);
			let latitude = 1;
			let longitude = 1;
			let re = uni
				.request({
					url: `http://192.168.3.5:8080/group/groupApi/add/users/wx?latitude=${latitude}&longitude=${longitude}&userId=${userId}&userName=${userName}`,
					method: 'POST',
					header: {
						Authorization: `Bearer ${aa}`
					},
					data: JSON.stringify(list)
				})
				.then(res => {
					console.log(res, 'res');
					uni.showToast({
						title: '创建成功'
					});
					this.close();
				})
				.catch(e => {
					uni.showToast({
						title: e.msg
					});
				});
			console.log(re);
		},
		close() {
			console.log('close');
			this.show = false;
			/* 状态取反 */
			this.btn = !this.btn;
			/* id为空 */
			this.friendIds = [];
			this.friendList = this.friendList.map(i => {
				i.status = false;
				return i;
			});
		},
		open() {
			this.show = true;
			console.log('opren');
		},
		back() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
/* 修改 u-cell mr26 */
::v-deep .u-cell__left-icon-wrap {
	margin-right: 52rpx !important;
}
.laBtn1 {
	width: 686rpx;
	height: 88rpx;
	background: #e8e8e8;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	.word99 {
		margin: 0 auto;
		line-height: 88rpx;
		width: 120rpx;
		// height: 42rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #b1b1b1;
	}
}
.laBtn2 {
	width: 686rpx;
	height: 88rpx;
	background: #a14bff;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	.word88 {
		margin: 0 auto;
		line-height: 88rpx;
		width: 120rpx;
		// height: 42rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
	}
}

.btn1 {
	width: 280rpx;
	height: 84rpx;
	background: #a054fe;
	border-radius: 18rpx 18rpx 18rpx 18rpx;
	opacity: 1;
	display: flex;
	align-items: center;

	.word1 {
		width: 128rpx;
		height: 44rpx;
		font-size: 32rpx;
		// font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		// line-height: 0rpx;
		-webkit-background-clip: text;
		// -webkit-text-fill-color: transparent;
	}
	.word1::after {
		content: '🔒';
		display: inline-block;
		translate: 183rpx -75rpx;
		border-radius: 50%;
		width: 24rpx;
		height: 24rpx;
		background: #a240ff;
		opacity: 1;
		font-size: 16rpx;
		font-weight: 400;
		text-align: center;
		line-height: 24rpx;
	}
}
.custom {
	background-color: #a054fe;
}
.select {
	background-color: greenyellow;
}
.message {
	// width: 96rpx;
	// height: 66rpx;
	font-size: 48rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #1b1b1b;
	// line-height: 0rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}

.contactMen {
	// width: 144rpx;
	// height: 66rpx;
	font-size: 48rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #9f9f9f;
	// line-height: 0rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}

.myFamily {
	// width: 96rpx;
	// height: 44rpx;
	font-size: 32rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #1b1b1b;
	// line-height: 0rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}

.myMessage {
	// width: 396rpx;
	// height: 32rpx;
	font-size: 22rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #d9d9d9;
	// line-height: 0rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}

.myTime {
	// width: 52rpx;
	// height: 28rpx;
	font-size: 20rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #cfd4dc;
	// line-height: 0rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}

.word {
	// width: 750rpx;
	// height: 56rpx;
	background: #ffffff;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	margin: 12rpx 702rpx 10rpx 32rpx;
}

.menList {
	// width: 686rpx;
	// height: 108rpx;
	opacity: 1;

	.right {
		width: 590rpx;
		height: 108rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
	}
}
</style>
